<template>
	<view @touchmove.stop.prevent="clear" class="load-main" v-show="loadingShow">
		<uni-transition :mode-class="['fade']" :styles="transfromClass" :show="loadingShow">
			<view class="loader"></view>
		</uni-transition>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: 'uniLoading',
		computed: {
			//计算属性判断vuex中的显示状态
			loadingShow() {
				console.log(this.$mStore.state.requestLoading)
				return this.$mStore.state.requestLoading;
			}
		},
		created() {
			if (!this.loadingShow) {
				this.request_show_loading()
			}
		},
		data() {
			return {
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'z-index': 999,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center'
					// 'background-color': '#ffffff'
				}
			};
		},
		methods: {
			...mapMutations(['request_show_loading']),
			...mapMutations(['request_hide_loading']),
			clear(e) {
				// TODO nvue 取消冒泡
				e.stopPropagation()
			}
		}
	}
</script>

<style scoped lang="scss">
	.load-main {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		right: 0;
		background-color: #ffffff;
		z-index: 998;
	}

	.loader {
		position: relative;
		width: 2.5em;
		height: 2.5em;
		transform: rotate(165deg);
	}

	.loader:before,
	.loader:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		width: 0.5em;
		height: 0.5em;
		border-radius: 0.25em;
		transform: translate(-50%, -50%);
	}

	.loader:before {
		animation: before 2s infinite;
	}

	.loader:after {
		animation: after 2s infinite;
	}

	@keyframes before {
		0% {
			width: 0.5em;
			box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
		}

		35% {
			width: 2.5em;
			box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
		}

		70% {
			width: 0.5em;
			box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
		}

		100% {
			box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
		}
	}

	@keyframes after {
		0% {
			height: 0.5em;
			box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
		}

		35% {
			height: 2.5em;
			box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
		}

		70% {
			height: 0.5em;
			box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
		}

		100% {
			box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
		}
	}

	// .loading {
	// 	position: fixed;
	// 	width: 100%;
	// 	height: 100%;
	// 	background-color: #FFFFFF;
	// 	text-align: center;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	z-index: 999;

	// 	image {}
	// }
</style>
